
<!doctype html>
<html lang="en">
<head>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>仿百度注册</title>
    <link rel="stylesheet" href="/static/css/custom.css">
</head>
<body>
<form>
<div class="register">
    <p>
        <label>用户名</label><input type="text" placeholder="请设置用户名" id="username"><span id="userinfo"></span>
    </p>
    <div id="div1">
   
    </div>
    <p>
        <label>手机号</label><input type="text" placeholder="请填写手机号"id="telph"><span id="telinfo"></span>
    </p>
    <p>
        <label>密码</label><input type="text" placeholder="请设置用户密码" id="passwd"><span id="passinfo"></span>
    </p>
    <p>
        <label>验证码</label>
        <input type="text" placeholder="验证码" style="width: 205px" id="yanzhenbtn">
        <input type="button" value="点击获取验证码" style="width: 143px"id="yanzhengma"><span id="yanzheninfo"></span>
    </p>
    <p style="margin-left: 75px;font-size: 12px">
        <input type="checkbox" required> 阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
    </p>
    <p style="margin-left: 75px;">
        <input type="submit" value="注册" id="submitbutton">
    </p>
</div>
</form>
<div class="chuizhi">
 <MARQUEE  class="yidong" behavior=alternate direction=up height=268 scrollAmount=7> 注册页面 </MARQUEE>
 </div>
<div class="shuipin">
<marquee behavior="alternate"><marquee width="250"?direction=right>欢迎欢迎</marquee></marquee>
</div>

<script>


$(document).ready(function() {
	//以下为验证码区域
	 var x=['1314520','1314920','1314240'];
		var y;
	$("#yanzhengma").click(function(){
		
		y = x[Math.round(Math.random()*2)];
		alert(y)
		
		
	$("#yanzhenbtn").change(function(){
		if($("#yanzhenbtn").val()==y){
			$("#yanzheninfo").html("<img src='/static/imgs/ok_small.png'>符合要求");
$("#yanzhenbtn").css("border-color","black")

			}
		
		else{
		$("#yanzheninfo").html("<img src='/static/imgs/err_small.png'>请输入正确的验证码");
	$("#yanzhenbtn").css("border-color","#F00")
			
			}
		
		})
		//for(var i=0;i<x.length;i++){alert(x[i]);break};
		
			
			
			
		})
	//以下为用户名区域
	
	$("#username").focus(function(){
	$("#userinfo").html("请输入你的用户名")
});
	$("#username").blur(function(){
	$("#userinfo").empty();
})

//以下为密码区域
$("#passwd").focus(function(){
$("#passinfo").html("请输入你的密码")
})
$("#passwd").blur(function(){
	if($("#passwd").val().length<6 ||$("#passwd").val().length>12){
		$("#passinfo").html("<img src='/static/imgs/err_small.png'>密码长度为6~12位");
$("#passwd").css("border-color","#F00")		
		}
	else{
		//验证密码不全部是数字
		if(isNaN($("#passwd").val()))
		{
			$("#passinfo").html("<img src='/static/imgs/ok_small.png'>符合要求");
			$("#passwd").css("border-color","black")
		
		}
		
		//若密码全是数字
		else{
		

$("#passinfo").html("<img src='/static/imgs/err_small.png'>密码不能全是数字");
$("#passwd").css("border-color","#F00")
			}
		
		;
		
		
		}
	
	
//$("#passinfo").empty()
})










//以下为电话号码区域
$("#telph").focus(function(){

$("#telinfo").html("请输入你的电话号码")
})

$("#telph").blur(function(){
if($("#telph").val().length!=11){
$("#telinfo").html("<img src='/static/imgs/err_small.png'>电话长度为11位");
$("#telph").css("border-color","#F00")}

else{
	$("#telinfo").html("<img src='/static/imgs/ok_small.png'>符合要求")
			$("#telph").css("border-color","#black")	}

})








})



</script>





<!--<script>
    document.getElementById('username').onblur = function () {
        if(this.value.length < 5 || this.value.length > 15){
            document.getElementById('userinfo').innerHTML = "<img src='imgs/err_small.png'> 用户名长度为6-15之间";
            this.style.borderColor = "red";
        }else{
            document.getElementById('userinfo').innerHTML = "<img src='imgs/ok_small.png'>";
            this.style.borderColor = "black";
        }
    }
</script>-->

<script>
	$(document).ready(
	function() {
		$("#username").blur(function (){
			//$("#div1").text("asdasdasd\n"+"\nqwqwqwqwq")
			
			
			//第一种方法
			//$("#div1").load("http://192.168.123.51:5000");
			//第二种方法
			//$.get("http://192.168.123.51:5000",function(data){$("#div1").html(data)})
			//第三种方法
			//$.post("http://192.168.123.51:5000",{username:"dangmu"},function(data)
			//{$(" #div1").html(data)})
					
		}) 
    })
</script>

<script>
$("#username").blur(function(){
	$.ajax({
		url:'http://192.168.123.13:5000/check_form',
		type:'GET',
		async:true,
		 
		data:{username:$("#username").val()},
		timeout:500000,//超时时间
		dataType:'text',//返回的数据格式：json/xml/html/script/jsonp/text
		//callback:'json9',
		beforeSend: function(xhr){console.log(xhr);console.log('发送前')},
		success: function(data,textStatus,jqXHR){
			console.log(data);
			//$('#container').append(JSON.steingify(data));
			
				
if($("#username").val().length < 5 ||$("#username").val().length >15){
			
			
			$("#userinfo").html("<img src='/static/imgs/err_small.png'>用户名长度为6-15之间");
			$("#username").css("border-color","#F00")
			
			}
		else{
			if(data!=300){
				alert("可以")
			$("#userinfo").html("<img src='/static/imgs/ok_small.png'>符合要求")
			$("#username").css("border-color","black")	
			$("#div1").empty()	
			
			}
					
			else{
				alert("用户已经存在\n请换个用户名");$("#userinfo").html("<img src='/static/imgs/err_small.png'>亲~~~\n用户已经存在了");
				$("#div1").html('<input type="radio" name="radio_x" id="radio1">人生苦短及时行乐<input type="radio" name="radio_x" id="radio2">人生太长及时行乐<input type="radio" name="radio_x"id="radio3">人生瞎几把过吧')
			if($("#radio1").click(
			function(){$("#username").val("人生苦短及时行乐")
			;$("#userinfo").html("<img src='/static/imgs/ok_small.png'>符合要求")
			$("#username").css("border-color","black")
			$("#username").css("border-color","black");
			$("#div1").empty()
			}));
			
			
			if($("#radio2").click(
			function(){$("#username").val("人生太长及时行乐")
			;$("#userinfo").html("<img src='/static/imgs/ok_small.png'>符合要求")
			$("#username").css("border-color","black")
			$("#username").css("border-color","black");
			$("#div1").empty()
			
			}));
			
			if($("#radio3").click(
			function(){$("#username").val("人生瞎几把过吧");$("#userinfo").html("<img src='/static/imgs/ok_small.png'>符合要求");
			$("#username").css("border-color","black");
			$("#div1").empty()
			}));
				
				
				}
				
		
		}
		
		//$("#userinfo").val("yonghu")
		console.log(textStatus);
		console.log(jqXHR);},
		error: function(xhr,textStatus){console.log('错误');console.log(xhr);console.log(textStatus)},
		complete: function(){console.log('结束');
		
		}
	})
	})
	
</script>
</body>
</html>